<template>
  <view class="min-h-[100vh] !bg-[#060606]" :style="themeColor()">
    <view class="zhye-top">
      <view class="top-title flex text-center relative items-center pt-[120rpx]">
        <image src="@/image/yve/back.png" style="width: 52rpx;height: 52rpx;position: absolute" class="left-[5%]" @click="pageBack"/>
        <view class="text-[#fff] text-[32rpx] leading-[36rpx] flex-1 font-bold">账户余额</view>
        <view class="absolute right-[5%] rounded-[3rpx] px-[20rpx] py-[16rpx] text-[#bb5858] bg-[#ffffff] text-[24rpx]" @click="toLink('/app/pages/member/point_detail')">积分明细</view>
      </view>
      <view class="number-box mt-[140rpx] w-[80%] ml-[10%] flex text-[#630704]">
        <view class="flex-1 text-center">
          <view>累计积分</view>
          <view class="text-[50rpx] font-bold mt-[10rpx]">{{pointInfo.point_get||0}}</view>
        </view>
        <view class="flex-1 text-center">
          <view>累计消费</view>
          <view class="text-[50rpx] font-bold mt-[10rpx]">{{pointInfo.use||0}}</view>
        </view>
        <view class="flex-1 text-center">
          <view>可用积分</view>
          <view class="text-[50rpx] font-bold mt-[10rpx]">{{pointInfo.point||0}}</view>
        </view>
      </view>
    </view>
    <view class="w-[100%] rmhd-top-title">
      <view class="mt-[-140rpx] bg-[#2f2f2f] w-[86%] m-[auto] py-[30rpx] px-[24rpx] border-radius-box">
        <view class="flex bg-linear-gradient">
          <view class="flex-1 text-[#fff] text-center">
            <image src="@/image/yve/qd.png" class="w-[160rpx] h-[160rpx]"/>
            <view class="font-bold">每日赚积分</view>
            <view class="text-[#999999]">每日签到</view>
            <view class="text-[#FFEEC9] mt-[10rpx] h-[50rpx] leading-[50rpx] bg-[#b13f3f] w-max m-[auto] px-[20rpx] rounded-[25rpx]" @click="toLink('/app/pages/member/sign_in')">去签到</view>
          </view>
          <view class="flex-1 text-[#fff] text-center">
            <image src="@/image/yve/dk.png" class="w-[160rpx] h-[160rpx]"/>
            <view class="font-bold">积分当钱花</view>
            <view class="text-[#999999]">抵扣部分费用</view>
            <view class="text-[#FFEEC9] mt-[10rpx] h-[50rpx] leading-[50rpx] bg-[#b13f3f] w-max m-[auto] px-[20rpx] rounded-[25rpx]" @click="toLink('/addon/shop/pages/point/index')">去兑换</view>
          </view>
          <view class="flex-1 text-[#fff] text-center">
            <image src="@/image/yve/xd.png" class="w-[160rpx] h-[160rpx]"/>
            <view class="font-bold">每日赚积分</view>
            <view class="text-[#999999]">下单得积分</view>
            <view class="text-[#FFEEC9] mt-[10rpx] h-[50rpx] leading-[50rpx] bg-[#b13f3f] w-max m-[auto] px-[20rpx] rounded-[25rpx]" @click="toLink('/addon/shop/pages/goods/list')">去逛逛</view>
          </view>
        </view>
      </view>
    </view>
    <view class="w-[100%] zrwljfhd-top-title" v-if="pointList.length > 0">
      <view class="mt-[60rpx] bg-[#2f2f2f] w-[86%] m-[auto] py-[30rpx] px-[24rpx] border-radius-box">
        <view class="flex items-center mt-[20rpx]">
          <image src="@/image/yve/hd.png" class="w-[66rpx] h-[66rpx]"/>
          <view class="flex-1 ml-[20rpx]">
            <view class="text-[#ffffff]">参与活动</view>
            <view class="text-[#999999]">返回积分根据会员等级而不同</view>
          </view>
          <view class="qck-class" @click="toLink(pointList[0].button.wap_redirect)">{{pointList[0].button.text}}
          </view>
        </view>
        <view class="flex items-center mt-[20rpx]">
          <image src="@/image/yve/sp.png" class="w-[66rpx] h-[66rpx]"/>
          <view class="flex-1 ml-[20rpx]">
            <view class="text-[#ffffff]">购买商品</view>
            <view class="text-[#999999]">每消费15元，可获得1积分</view>
          </view>
          <view class="qck-class" @click="toLink(pointList[1].button.wap_redirect)">{{pointList[1].button.text}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { t } from '@/locale'
import { redirect, img,pxToRpx } from '@/utils/common';
import { getMemberAccountPointcount,getTaskPoint } from '@/app/api/member';
import { topTabar } from '@/utils/topTabbar'

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({title:'我的积分'})
/********* 自定义头部 - end ***********/

// 获取系统状态栏的高度
let menuButtonInfo:any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
const headerStyle = computed(()=>{
  return {
    backgroundImage: 'url(' + img('static/resource/images/member/point/point_bg.png') + ') ',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'bottom',
    // paddingTop:Object.keys(menuButtonInfo).length?(Number(menuButtonInfo.height) * 2 + menuButtonInfo.top * 2 + 77)+'rpx':'77rpx',
  }
})
const topStyle = computed(() => {
  let style = ''
  style = Object.keys(menuButtonInfo).length?(pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) +  38) + 'rpx;':'38rpx'
  return style
})

//个人积分信息
const pointInfo = ref({});
//积分任务
const pointList = ref([]);
const loading = ref(true)
onLoad(async()=>{
  let pointInfoRes :any = await getMemberAccountPointcount()
  let pointListRes :any = await getTaskPoint()
  pointInfo.value = pointInfoRes.data
  pointList.value = pointListRes.data
  loading.value = false
})
const toLink=(url='',param={})=>{
  redirect({ url, param })
}
const pageBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.class-select {
  position: relative;
  font-weight: 500;
  color: var(--primary-color);
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 4rpx;
    border-radius: 4rpx;
    background-color: var(--primary-color);
    width: 40rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
:deep(.uni-scroll-view){
  overflow: auto hidden !important;
}
.body-bottom{
  padding-bottom:  calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom:  calc(20rpx + env(safe-area-inset-bottom));
}
.pl-20rpx{
  padding-left: 20rpx;
}
.zhye-top {
  width: 100%;
  height: 700rpx;
  background-image: url("../../../image/yve/topbg.png");
  background-size: 100% 100%;
}
.border-radius-box {
  border-radius: 16rpx;
  overflow: hidden;
}
.rmhd-top-title {
  position: relative;
}
.zrwljfhd-top-title {
  position: relative;
}
.rmhd-top-title::before {
  position: absolute;
  content: '热门活动';
  display: block;
  width: 240rpx;
  height: 66rpx;
  background-image: url("../../../image/yve/rmhd.png");
  background-size: 100% 100%;
  left: 3.5%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 32rpx;
  line-height: 70rpx;
  font-weight: bolder;
  text-indent: 2.5em;
}
.zrwljfhd-top-title::before {
  position: absolute;
  content: '做任务领积分活动';
  display: block;
  width: 366rpx;
  height: 66rpx;
  background-image: url("../../../image/yve/jfhd.png");
  background-size: 100% 100%;
  left: 3.5%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 32rpx;
  line-height: 70rpx;
  font-weight: bolder;
  text-indent: 2.5em;
}
.bg-linear-gradient {
  padding-bottom: 30rpx;
  background: linear-gradient( 180deg, #B13F3F00 30%, #B13F3F30 100%);
}
.qck-class {
  width: 114rpx;
  height: 53rpx;
  line-height: 53rpx;
  background: #B13F3F;
  border-radius: 100rpx;
  font-weight: 500;
  font-size: 26rpx;
  color: #FFEEC9;
  text-align: center;
}
</style>
